<template>
  <s-layout class="set-wrap" title="平台使用指南" :bgStyle="{ color: '#FFFFFF' }" navbar="normal" :selffixed="false" subarbg="true">
    <view class="d-flex align-items-stretch channel-title-box">
<!--      <h4 class="channel-title">使用指南</h4>-->
    </view>
    <uni-collapse>
      <uni-collapse-item v-for="(item, index) in state.list" :key="item">
        <template v-slot:title>
          <view class="ss-flex ss-col-center header" >
            <view class="ss-m-l-20 ss-m-r-20 icon">
              <view class="rectangle">
                <view class="num ss-flex ss-row-center ss-col-center">
                  {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
                </view>
              </view>
              <view class="triangle"> </view>
            </view>
            <view class="title ss-m-t-36 ss-m-b-36">
              {{ item.category }}
            </view>
          </view>
        </template>
        <view class="content ss-p-l-78 ss-p-r-20 ss-p-b-20 ss-p-t-10">
          <view class="text ss-flex" v-for="(item1, index) in item.children" :key="item1" @click="sheep.$router.go('/pages/index/user?path=richtext', { id: item1.id })">
            <view>{{ item1.title }}</view>
            <view class="right-rarrow"><uni-icons type="forward" size="16" style="color:#999999;"></uni-icons></view>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>

    <view class="image-content">
      <image style="width: 80%;" src="@/static/images/kfhm2.png" mode="widthFix"></image>
    </view>
  </s-layout>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    reactive
  } from 'vue';
  import sheep from '@/sheep';

  const state = reactive({
    list: [],
    loading: true,
  });

  async function getFaqList() {
    const {
      code,
      data
    } = await sheep.$api.data.richtextlist();
    if (code === 1) {
      state.list = data;
      state.loading = false;
    }
  }

  onLoad(() => {
    getFaqList();
  });


</script>

<style lang="scss" scoped>
  .channel-title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 50px;
    flex: 1 1 auto!important;
  }
  .header {
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 30rpx;
      max-width: 688rpx;
    }

    .icon {
      position: relative;
      width: 40rpx;
      height: 40rpx;

      .rectangle {
        position: absolute;
        left: 0;
        top: 0;
        width: 40rpx;
        height: 36rpx;
        background: var(--ui-BG-Main);
        border-radius: 4px;

        .num {
          width: 100%;
          height: 100%;
          font-size: 24rpx;
          font-weight: 500;
          color: var(--ui-BG);
          line-height: 32rpx;
        }
      }

      .triangle {
        width: 0;
        height: 0;
        border-left: 4rpx solid transparent;
        border-right: 4rpx solid transparent;
        border-top: 8rpx solid var(--ui-BG-Main);
        position: absolute;
        left: 16rpx;
        bottom: -4rpx;
      }
    }
  }

  .content {
    border-bottom: 1rpx solid #dfdfdf;

    .text {
      font-size: 28rpx;
      color: #333333;
      line-height: 32px;
      justify-content: space-between;
    }
  }

  .image-content {
    margin-top: 50px;
    text-align: center;
  }
</style>